<div style="height: 10px; clear: both;"></div>
<div class="row">
    <div class="col s12">
        <div class="card hoverable">
            <div class="card-action grey lighten-5">
                <h2 class="light-blue-text text-darken-4">
                    <i class="fas fa-tag"></i> Payment ID <small id="paymend_id"
                       style="word-break: break-all; word-wrap: break-word;"></small></h2>
            </div>
            <div class="card-content">
                <h5><i class="fas fa-exchange"></i><span 
                    id="transactions_count"></span> transaction(s) with this Payment ID:</h5>
                <div class="row">
                    <div class="col s12 table-container">
                        <table class="highlight centered">
                            <thead>
                                <tr>
                                    <th><i class="fas fa-hashtag"></i> Hash</th>
                                    <th><i class="fas fa-donate"></i> Fee</th>
                                    <th><i class="fas fa-money-bill-wave-alt"></i> Total Amount</th>
                                    <th><i class="fas fa-hdd"></i> Size</th>
                                </tr>
                            </thead>
                            <tbody id="transactions_rows">
                    
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var paymentId, xhrGetTsx, txsByPaymentId;

    paymentId = urlParam('hash');
    updateText('paymend_id', paymentId);

    currentPage = {
        destroy: function () {
            if (xhrGetTsx) xhrGetTsx.abort();
        },
        init: function () {
            getTransactions();
        },
        update: function () {}
    };

    function getTransactions() {
        if (xhrGetTsx) xhrGetTsx.abort();
        txsByPaymentId = $.parseJSON(sessionStorage.getItem('txsByPaymentId'));
        if (txsByPaymentId) {
            renderTransactions(txsByPaymentId);
        } else {
            xhrGetTsx = $.ajax({
                url: api + '/json_rpc',
                method: "POST",
                data: JSON.stringify({
                    jsonrpc: "2.0",
                    id: "explorer_get_txs_by_payment_id",
                    method: "gettransactionsbypaymentid",
                    params: {
                        payment_id: paymentId
                    }
                }),
                dataType: 'json',
                cache: 'false',
                success: function (data) {
                    var txs = data.result.transactions;
                    renderTransactions(txs);
                }
            });
        }
        sessionStorage.removeItem('txsByPaymentId');
    }

    function getTransactionCells(transaction) {
        return '<td style="word-break: break-all; word-wrap: break-word;">' + formatPaymentLink(transaction.hash) + '</td>' +
            '<td>' + getReadableCoins(transaction.fee, 4, true) + '</td>' +
            '<td>' + getReadableCoins(transaction.amount_out, 4, true) + '</td>' +
            '<td>' + formatBytes(parseInt(transaction.size)) + '</td>';
    }

    function getTransactionRowElement(transaction, jsonString) {

        var row = document.createElement('tr');
        row.setAttribute('data-json', jsonString);
        row.setAttribute('data-hash', transaction.hash);
        row.setAttribute('id', 'transactionRow' + transaction.hash);

        row.innerHTML = getTransactionCells(transaction);

        return row;
    }

    function renderTransactions(transactionResults) {

        updateText('transactions_count', transactionResults.length);

        var $transactionsRows = $('#transactions_rows');

        for (var i = 0; i < transactionResults.length; i++) {

            var transaction = transactionResults[i];

            var transactionJson = JSON.stringify(transaction);

            var existingRow = document.getElementById('transactionRow' + transaction.hash);

            if (existingRow && existingRow.getAttribute('data-json') !== transactionJson) {
                $(existingRow).replaceWith(getTransactionRowElement(transaction, transactionJson));
            } else if (!existingRow) {
                var transactionElement = getTransactionRowElement(transaction, transactionJson);
                $transactionsRows.append(transactionElement);
            }

        }
    }

    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>